<template>
  <view class="bgc">
      <view class="setting">
        <!-- 头部 -->
          <view class="box-title">
            <view class="top-title">Hi，小橙子</view>
            <view class="content-title">陶瓷营销集团股份有限公司</view>
            <view class="bottom">
                <view class="left-box">华南-战略区域</view>
                <view class="right-box">10100269</view>
            </view>
          </view>
          <!-- 中 -->
          <view class="box-content">
            
              <navigator url="/pages/index/index" class="box-item">
                <view class="leftimage"></view>
                <text url="#" class="textContent">修改密码</text>
                <image src="./images/Group_1453.png" mode="scaleToFill" class="rightimage"></image>
              </navigator>
              
             <navigator class="box-item">
               <view class="leftimage"></view>
               <text url="#" class="textContent">修改联系方式</text>
               <image src="./images/Group_1453.png" mode="scaleToFill" class="rightimage"></image>
             </navigator>
             
             <navigator class="box-item">
               <view class="leftimage"></view>
               <text url="#" class="textContent">关于我们</text>
               <image src="./images/Group_1453.png" mode="scaleToFill" class="rightimage"></image>
             </navigator>
             
             <navigator class="box-item">
               <view class="leftimage"></view>
               <text url="#" class="textContent">用户隐私协议</text>
               <image src="./images/Group_1453.png" mode="scaleToFill" class="rightimage"></image>
             </navigator>
             
          </view>
          
          
          <!-- 下 -->
          <button class="fotter-button">退出登录</button>
      </view>
  </view>
</template>

<script>
</script>

<style lang="scss" scoped>
  .bgc{
    background:#f5f5f5;
      height: 100vh;
  }
  .setting{
    .box-title{
        padding: 70rpx 110rpx; 
        width: 750rpx;
        height: 305rpx;
        opacity: 1;
        background: #fff;
         .top-title{
           font-size: 46rpx;
           font-weight: 700;
           line-height: 55.2rpx;
           color: rgba(43, 43, 43, 1);
           margin-bottom: 11rpx;
         }
         .content-title{
           font-size: 34rpx;
           font-weight: 700;
           color: rgba(43, 43, 43, 1);
           margin-bottom: 11rpx;
         }
         .bottom{
           display: flex;
              .left-box{
                width: 209rpx;
                height: 50rpx;
                opacity: 1;
                border-radius: 5rpx;
                background: rgba(237, 252, 247, 1);
                font-size: 26rpx;
                font-weight: 400;
                letter-spacing: 0rpx;
                line-height: 31.2rpx;
                color: rgba(3, 179, 133, 1);
                text-align: center;
                line-height: 50rpx;
                vertical-align: middle;
              }
              .right-box{
                margin-left: 35rpx;
                width: 178rpx;
                height: 50rpx;
                opacity: 1;
                border-radius: 5rpx;
                background: rgba(237, 252, 247, 1);
                font-size: 26rpx;
                font-weight: 400;
                letter-spacing: 0rpx;
                line-height: 31.2rpx;
                color: rgba(3, 179, 133, 1);
                text-align: center;
                line-height: 50rpx;
                vertical-align: middle;
              }
         }
        
      }
      
      
      // 
      .box-content{
        margin-top: 27rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
          .box-item{
            // padding: 15rpx 36rpx;
            padding-left: 50rpx;
            margin-top: 27rpx;
            width: 750rpx;
            height: 100rpx;
            opacity: 1;
            background: rgba(255, 255, 255, 1);
            display: flex;
            // justify-content: space-around;
            align-items: center;
             .leftimage{
               width: 70rpx;
               height: 70rpx;
               background: rgba(114, 148, 255, 1);
               border-radius: 50%;
               background-image: url(./images/Group_1497.png);
               background-size:50%;
               background-repeat: no-repeat;
               background-position: center;
             }
            
             .textContent{
               margin-left: 25rpx;
               font-size: 28rpx;
               font-weight: 700;
               line-height: 33.6rpx;
               color: rgba(43, 43, 43, 1);
               text-align: center;
             }
             .rightimage{
              width: 30rpx;
              height: 50rpx;
              position: absolute;
              left: 90% ;
            }
          }
          .box-item:nth-child(2) .leftimage{
            background: rgba(255, 149, 135, 1);
            border-radius: 50%;
            background-image: url(./images/remind.png);
            background-size:80%;
            background-repeat: no-repeat;
            background-position: center;
          }
          .box-item:nth-child(3) .leftimage{
            background: rgba(92, 207, 225, 1);
            border-radius: 50%;
            background-image: url(./images/remind1.png);
            background-size:80%;
            background-repeat: no-repeat;
            background-position: center;
          }
          .box-item:nth-child(4) .leftimage{
            background: rgba(144, 155, 242, 1);
            border-radius: 50%;
            background-image: url(./images/Group_1498.png);
            background-size:60%;
            background-repeat: no-repeat;
            background-position: center;
          }
      }
      
      .fotter-button{
        width: 750rpx;
        height: 100rpx;
        opacity: 1;
        margin-top: 100rpx;
        background: rgba(255, 255, 255, 1);
        font-size: 34rpx;
        font-weight: 700;
        line-height: 100rpx;
        color: rgba(3, 179, 133, 1);
      }
  }
</style>